<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import type { TableData } from '@/api/project/types'
import { ElTable, ElTableColumn } from 'element-plus'
import { getAccountListApi } from '@/api/project'

interface AccountData {
  uid: string
  oprName: string
  score: number
  icome: number
}

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})

const accountList = ref<AccountData[]>([])
const loading = ref(false)
const operatorCount = ref(0)

// 获取账户列表数据
const fetchAccountList = async () => {
  if (!props.currentRow?.id) return
  
  loading.value = true
  try {
    const response = await getAccountListApi({
      id:props.currentRow.id
    })
    if (response.data) {
      accountList.value = response.data.items
      operatorCount.value = accountList.value.length
    }
  } catch (error) {
    console.error('获取账户列表失败:', error)
    accountList.value = []
    operatorCount.value = 0
  } finally {
    loading.value = false
  }
}

// 监听 currentRow 变化，重新获取数据
watch(() => props.currentRow, (newRow) => {
  if (newRow?.id) {
    fetchAccountList()
  }
}, { deep: true })

// 组件挂载时获取数据
onMounted(() => {
  if (props.currentRow?.id) {
    fetchAccountList()
  }
})
</script>

<template>
  <div class="member-list">
    <div class="list-header">
      <h4>数目: {{ operatorCount }}</h4>
    </div>
    
    <ElTable 
      v-loading="loading"
      :data="accountList" 
      style="width: 100%"
      max-height="300"
      border
    >
      <ElTableColumn 
        prop="uid" 
        label="UID" 
        
        align="center"
      />
      <ElTableColumn 
        prop="oprName" 
        label="操手" 
        align="center"
      />
      <ElTableColumn 
        prop="score" 
        label="当前总积分" 
        align="center"
      />
      <ElTableColumn 
        prop="income" 
        label="收益" 
        align="center"
      />
    </ElTable>
  </div>
</template>

<style scoped>
.member-list {
  padding: 10px;
}

.list-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.list-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}
</style>